import React from 'react';

// 导入组件
import FilterTitle from '../FilterTitle'
import FilterPicker from '../FilterPicker'
import FilterMore from '../FilterMore'

import { getHousesConditionApi } from "../../../../api/axios";

import styles from './index.module.css'



// 标题高亮状态
// true 表示高亮； false 表示不高亮
const titleSelectedStatus = {
    area: false,
    mode: false,
    price: false,
    more: false
}

// FilterPicker 和 FilterMore 组件的选中值
const selectedValues = {
    area: ['area', 'null'],
    mode: ['null'],
    price: ['null'],
    more: []
}

export default class Filter extends React.Component {
    // 状态值书写区域
    state = {
        titleSelectedStatus, openType: '', filtersData: {}, selectedValues
    }
    componentDidMount() {
        this.bodyHtml = document.body
        this.getFiltersData()
    }


    // 封装获取所有筛选条件的方法
    async getFiltersData() {
        // 获取当前定位城市id
        const { value } = JSON.parse(localStorage.getItem('localCity'))
        const res = await getHousesConditionApi(value)
        this.setState({
            filtersData: res.data.body
        })
    }
    //  事件处理区域
    // 点击标题菜单实现高亮
    // 注意：this指向的问题！！！
    // 说明：要实现完整的功能，需要后续的组件配合完成！

    /* 
       展示条件筛选对话框后，页面滚动问题：
       
       1 在 componentDidMount 中，获取到 body，并存储在this中（ htmlBody ）。
       2 在展示对话框的时候，给 body 添加类 body-fixed。
       3 在关闭对话框（取消或确定）的时候，移除 body 中的类 body-fixed。
     */

    onTitleClick = type => {
        // 给 body 添加样式
        this.bodyHtml.className = 'body-fixed'

        // 显示遮罩层是，页面不允许滑动

        // 根据选择框里面是否有选中的值，来设置高亮
        // 根据点击的不同，设置不同的高亮，

        /* 点击标题时，遍历标题高亮数据
            - 如果是当前标题，直接设置为高亮
            - 分别判断每个标题对应的筛选条件有没有选中值（判断每个筛选条件的选中值与默认值是否相同，相同表示没有选中值，不同，表示选中了值）
              - selectedVal 表示当前type的选中值
              - 如果type为area，此时，selectedVal.length !== 2 || selectedVal[0] !== 'area'，就表示已经有选中值
              - 如果 type 为 mode，此时，selectedVal[0] !== 'null'，就表示已经有选中值
              - 如果 type 为 price，此时，selectedVal[0] !== 'null'，就表示有选中值
            - 如果有，就让该标题保持高亮
            - 如果没有，就让该标题取消高亮
        */


        // 1.获取当天高亮的状态值，和选择框选中的值
        const { selectedValues, titleSelectedStatus } = this.state
        const newTitleSelectedStatus = { ...titleSelectedStatus }
        // 通过newTitleSelectedStatus里面的键，来遍历，设置对应的type状态
        Object.keys(newTitleSelectedStatus).forEach(key => {
            // 做判断，设置对应的高亮值
            // 当前点击的标题做高亮
            if (key === type) {
                newTitleSelectedStatus[type] = true
                return
            }
            // 其他标题：
            const selectedVal = selectedValues[key]

            if (key === 'area' && (selectedVal.length !== 2 || selectedVal[0] !== 'area')) {
                newTitleSelectedStatus[key] = true
            } else if (key === 'mode' && (selectedVal[0] !== 'null')) {
                newTitleSelectedStatus[key] = true
            } else if (key === 'price' && (selectedVal[0] !== 'null')) {
                newTitleSelectedStatus[key] = true
            } else if (key === 'more' && selectedVal.length !== 0) {
                newTitleSelectedStatus[key] = true
            } else {
                newTitleSelectedStatus[key] = false
            }



        })

        console.log('ohh', type, newTitleSelectedStatus);

        // 依据点击的值，修改原始高亮的值
        // 同时也让选择框显示

        this.setState({
            titleSelectedStatus: newTitleSelectedStatus,

            // 展示对话框
            openType: type
        }
        )
    }

    // 取消（隐藏对话框）
    onCancel = type => {
        // 取消body的样式
        this.bodyHtml.className = ''


        console.log('cancel:', type)
        const { titleSelectedStatus, selectedValues } = this.state
        // 创建新的标题选中状态对象
        const newTitleSelectedStatus = { ...titleSelectedStatus }

        // 菜单高亮逻辑处理
        const selectedVal = selectedValues[type]
        if (
            type === 'area' &&
            (selectedVal.length !== 2 || selectedVal[0] !== 'area')
        ) {
            // 高亮
            newTitleSelectedStatus[type] = true
        } else if (type === 'mode' && selectedVal[0] !== 'null') {
            // 高亮
            newTitleSelectedStatus[type] = true
        } else if (type === 'price' && selectedVal[0] !== 'null') {
            // 高亮
            newTitleSelectedStatus[type] = true
        } else if (type === 'more' && selectedVal.length !== 0) {
            // 更多选择项 FilterMore 组件
            newTitleSelectedStatus[type] = true
        } else {
            newTitleSelectedStatus[type] = false
        }

        // 隐藏对话框
        this.setState({
            openType: '',

            // 更新菜单高亮状态数据
            titleSelectedStatus: newTitleSelectedStatus
        })
    }


    // 确定（隐藏对话框）
    // 保存当前选的值
    onSave = (type, value) => {
        // 取消body的样式
        this.bodyHtml.className = ''

        const { titleSelectedStatus } = this.state
        // 创建新的标题选中状态对象
        const newTitleSelectedStatus = { ...titleSelectedStatus }

        // 菜单高亮逻辑处理
        const selectedVal = value
        if (
            type === 'area' &&
            (selectedVal.length !== 2 || selectedVal[0] !== 'area')
        ) {
            // 高亮
            newTitleSelectedStatus[type] = true
        } else if (type === 'mode' && selectedVal[0] !== 'null') {
            // 高亮
            newTitleSelectedStatus[type] = true
        } else if (type === 'price' && selectedVal[0] !== 'null') {
            // 高亮
            newTitleSelectedStatus[type] = true
        } else if (type === 'more' && selectedVal.length !== 0) {
            // 更多选择项 FilterMore 组件
            newTitleSelectedStatus[type] = true
        } else {
            newTitleSelectedStatus[type] = false
        }

        const newSelectedValues = {
            ...this.state.selectedValues,
            // 只更新当前 type 对应的选中值
            [type]: value
        }
        const { area, mode, price, more } = newSelectedValues
        // 筛选条件数据
        const filters = {}
        // 区域
        const areaKey = area[0]
        let areaValue = 'null'
        if (area.length === 3) {
            areaValue = area[2] !== 'null' ? area[2] : area[1]
        }
        filters[areaKey] = areaValue

        // 方式和租金
        filters.mode = mode[0]
        filters.price = price[0]

        // 更多筛选条件 more
        filters.more = more.join(',')

        this.props.onFilter(filters)


        // 隐藏对话框
        this.setState({
            openType: '',
            // 更新菜单高亮状态数据
            titleSelectedStatus: newTitleSelectedStatus,

            selectedValues: newSelectedValues
        })


    }



    // 渲染 FilterPicker 组件的方法
    renderFilterPicker() {
        const {
            openType,
            filtersData: { area, subway, rentType, price },
            selectedValues
        } = this.state

        let defaultValue = selectedValues[openType]

        if (openType !== 'area' && openType !== 'mode' && openType !== 'price') {
            return null
        }

        // 根据 openType 来拿到当前筛选条件数据
        let data = []
        let cols = 3
        switch (openType) {
            case 'area':
                // 获取到区域数据
                data = [area, subway]
                cols = 3
                break
            case 'mode':
                data = rentType
                cols = 1
                break
            case 'price':
                data = price
                cols = 1
                break
            default:
                break
        }

        return (
            <FilterPicker
                key={openType}
                data={data}
                cols={cols}
                type={openType}
                defaultValue={defaultValue}
                onCancel={this.onCancel}
                onSave={this.onSave}
            />
        )
    }


    // 渲染FilterMore组件
    renderFilterMore() {
        const {
            openType,
            selectedValues,
            filtersData: { roomType, oriented, floor, characteristic }
        } = this.state
        if (openType !== 'more') {
            return null
        }

        const data = {
            roomType,
            oriented,
            floor,
            characteristic
        }

        const defaultValue = selectedValues.more

        return (
            <FilterMore
                data={data}
                type={openType}
                onSave={this.onSave}
                onCancel={this.onCancel}
                defaultValue={defaultValue}
            />
        )
    }





    // 视图渲染区域
    render() {
        const { titleSelectedStatus, openType } = this.state
        return (
            <div className={styles.root}>
                {/* 前三个菜单的遮罩层  点击遮罩层,隐藏对话框 */}
                {openType === 'area' || openType === 'mode' || openType === 'price' ? (
                    <div className={styles.mask} onClick={() => this.onCancel(openType)} />
                ) : null}
                <div className={styles.content}>
                    {/* 标题栏 */}
                    <FilterTitle
                        titleSelectedStatus={titleSelectedStatus}
                        onTitleClick={this.onTitleClick}
                    />

                    {/* 前三个菜单对应的内容： */}
                    {this.renderFilterPicker()}

                    {/* 最后一个菜单对应的内容： */}
                    {this.renderFilterMore()}
                </div>
            </div>
        )
    }
}